<template>
    <div class="chart-container">
        <h2>🎶 听歌标签年度占比</h2>
        <!-- 动态切换数据 -->
        <div class="chart-wrapper">
            <div
                    v-for="(data, index) in currentPieData"
                    :key="index"
                    class="chart-box"
            >
                <h3>{{ data.year }} 年</h3>
                <div :id="'pie-chart-' + index" class="pie-chart"></div>
            </div>
        </div>
    </div>
</template>

<script setup>
import { onMounted, nextTick, computed } from "vue";
import * as echarts from "echarts";
import useUserStore from '@/store/modules/user';

const userStore = useUserStore();

// 模拟数据：不同年份的听歌标签占比
const pieData_20253 = [
    {
        year: "2014",
        tags: [
            { name: "rock", value: 182.2, itemStyle: { color: "#ff4d4d" } },
            { name: "indie", value: 151.03, itemStyle: { color: "#36a2eb" } },
            { name: "alternative", value: 145.86, itemStyle: { color: "#ffcc00" } },
        ],
    },
    {
        year: "2015",
        tags: [
            { name: "electroclash", value: 4.03, itemStyle: { color: "#4bc0c0" } },
            { name: "trip-hop", value: 5.08, itemStyle: { color: "#de7474" } },
            { name: "indie", value: 8.4, itemStyle: { color: "#3a8efa" } },
        ],
    },
];

const pieData_40000 = [
    {
        year: "2014",
        tags: [
            { name: "indie", value: 1192.48, itemStyle: { color: "#ff4d4d" } },
            { name: "alternative", value: 1079.45, itemStyle: { color: "#36a2eb" } },
            { name: "rock", value: 1329.57, itemStyle: { color: "#ffcc00" } },
        ],
    },
    {
        year: "2015",
        tags: [
            { name: "alternative", value: 30.05, itemStyle: { color: "#4bc0c0" } },
            { name: "indie", value: 39.34, itemStyle: { color: "#de7474" } },
            { name: "rock", value: 27.39, itemStyle: { color: "#3a8efa" } },
        ],
    },
];

// 根据用户ID动态切换数据
const currentUserId = computed(() => userStore.id);
const currentPieData = computed(() => {
    return currentUserId.value === 20253 ? pieData_20253 : pieData_40000;
});

// 初始化图表
onMounted(() => {
    nextTick(() => {
        currentPieData.value.forEach((data, index) => {
            const chartDom = document.getElementById(`pie-chart-${index}`);
            if (chartDom) {
                const myChart = echarts.init(chartDom);
                const option = {
                    title: {
                        text: data.year + " 年",
                        left: "center",
                    },
                    tooltip: {
                        trigger: "item",
                    },
                    legend: {
                        bottom: 0,
                    },
                    series: [
                        {
                            name: "播放比例",
                            type: "pie",
                            radius: "50%",
                            data: data.tags,
                            emphasis: {
                                itemStyle: {
                                    shadowBlur: 10,
                                    shadowOffsetX: 0,
                                    shadowColor: "rgba(0, 0, 0, 0.5)",
                                },
                            },
                        },
                    ],
                };
                myChart.setOption(option);
            }
        });
    });
});
</script>

<style scoped>
.chart-container {
    width: 100%;
    text-align: center;
}

.chart-wrapper {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 20px;
}

.chart-box {
    width: 300px;
    height: 350px;
}

.pie-chart {
    width: 100%;
    height: 300px;
}
</style>